<template>
  <page-container>
    <a-row :span="24" :gutter="16">
      <a-col :span="18">
        <a-card>
          <template #title>
            <span style="margin-right: 20px">流转单ID:{{ formState.id }}</span>
          </template>
          <div class="form">
            <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-form-item label="状态">
                {{ formState.statusName }}
              </a-form-item>
              <a-form-item label="流转单标题">{{ formState.title }}</a-form-item>
              <a-form-item label="推送人">{{ formState.basicPerson }}</a-form-item>
              <a-form-item label="推送类别">{{ formState.type }}</a-form-item>
              <a-form-item label="审批领导">{{ formState.approvePerson }}</a-form-item>
              <!-- <a-form-item label="下发辖区">{{ getunit(formState.handleUnit) }}</a-form-item>
              <a-form-item label="辖区民警">{{ formState.handlePerson }}</a-form-item> -->
              <a-form-item label="接收民警">
                {{ formState.handlePerson }}({{ formState.xqdwName }})
              </a-form-item>
              <a-form-item label="处理期限">
                {{ formState.handleStartTime }} 至 {{ formState.handleEndTime }}
              </a-form-item>
              <a-form-item label="推送情况" :span="24" :wrapper-col="{ span: 18 }">
                <a-textarea
                  v-model:value="formState.basicContent"
                  placeholder="请输入推送情况"
                  style="min-height: 200px"
                  v-if="type == 'sp'"
                />
                <span v-else v-html="basicContentText"></span>
              </a-form-item>
              <a-form-item label="下发附件" name="basicContent" v-if="fileList.length">
                <a-upload :file-list="fileList" :multiple="true" name="file" disabled></a-upload>
              </a-form-item>
              <a-form-item
                label="回复内容"
                v-if="formState.feedbackContent"
                :wrapper-col="{ span: 18 }"
              >
                <span v-html="formState.feedbackContent"></span>
              </a-form-item>
              <a-form-item label="回访单附件" name="basicContent" v-if="visitFileList.length">
                <a-upload
                  :file-list="visitFileList"
                  :multiple="true"
                  name="file"
                  disabled
                ></a-upload>
              </a-form-item>
              <a-form-item label="反馈附件" name="basicContent" v-if="feedbackFileList.length">
                <a-upload
                  :file-list="feedbackFileList"
                  :multiple="true"
                  name="file"
                  disabled
                ></a-upload>
              </a-form-item>
            </a-form>
          </div>
          <div class="bottomc">
            <div class="buttonContent">
              <a-button @click="handleBrak">返回</a-button>
              <a-button @click="readClick(parseInt(formState.status))" style="margin-left: 10px">
                PDF预览
              </a-button>
              <a-button
                style="margin-left: 10px"
                @click="handleApproveUpdate"
                v-if="type == 'sp'"
                type="primary"
                :loading="loading"
              >
                审批并下发
              </a-button>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card style="height: 100%">
          <template #title>
            <span style="margin-right: 20px">流转单处理记录</span>
          </template>
          <processingRecord :formState="recordList" />
        </a-card>
      </a-col>
    </a-row>
    <modal ref="modalRef" @handleChange="ishandlegetRetuenDetail" />
  </page-container>
</template>
<script lang="ts">
import { defineComponent, ref, toRaw, onActivated } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import {
  detail,
  approveUpdate,
  getRetuenDetail,
  getQueryXqdwList,
  queryApproveLeader,
  logList,
  ProcessTypeTree,
} from '@/api/smart-tools/index';
import modal from './components/modalDetail.vue';
import processingRecord from './components/processingRecord.vue';
// import { typeList } from '@/views/smart-tools/typing';
// interface FormState {
//   id: string;
//   title: string; //标题
//   basicPerson: string; //推送人
//   type: string | undefined; //推送类别
//   handleUnit: string | undefined; //下发辖区
//   handleDay: string | undefined; //处理期限
//   basicContent: string; //推送情况
//   finishStatus: string;
// }
export default defineComponent({
  components: {
    modal,
    processingRecord,
  },
  setup() {
    const fileList = ref<any>([]);
    const basicContentText = ref<string>('');
    const visitFileList = ref<any>([]);
    const feedbackFileList = ref<any>([]);
    const url = (window as any).g.baseURL + '/processBasic/preview';
    // let formState: FormState = reactive({
    //   id: '',
    //   title: '',
    //   basicPerson: '',
    //   type: '',
    //   handleUnit: '',
    //   handleDay: '',
    //   basicContent: '',
    //   finishStatus: '',
    // });
    //下发辖区
    const unitList = ref<any>([]);
    const getunit = value => {
      let name = '';
      unitList.value.filter(item => {
        if (item.value == value) {
          name = item.name;
        }
      });
      return name;
    };
    let formState = ref<any>({});
    const loading = ref<boolean>(false);
    const onSubmit = () => {
      console.log('submit!', toRaw(formState));
    };
    const router = useRouter();
    const handleBrak = () => {
      fileList.value = [];
      visitFileList.value = [];
      feedbackFileList.value = [];
      router.back();
    };
    //筛选审批领导
    const getApprovePerson = value => {
      let name = '';
      approvePersonList.value.filter(item => {
        if (item.userId == value) {
          name = item.userName;
        }
      });
      return name;
    };
    //推送类别数据
    const typeList = ref<any>([]);
    const handleProcessTypeTree = () => {
      ProcessTypeTree().then(res => {
        typeList.value = res.data;
      });
    };
    const queryProcessBasicList = value => {
      detail(value).then(res => {
        formState.value = res.data[0];
        if (formState.value.basicContent.indexOf('\n') >= 0) {
          basicContentText.value = formState.value.basicContent.replace(/\n/g, '<br>');
        } else {
          basicContentText.value = formState.value.basicContent;
        }
        if (formState.value.feedbackContent && formState.value.feedbackContent.indexOf('\n') >= 0) {
          formState.value.feedbackContent = formState.value.feedbackContent.replace(/\n/g, '<br>');
        }
        if (formState.value.approveUserId) {
          formState.value.approveUserId = getApprovePerson(formState.value.approveUserId);
        }
        if (formState.value.type) {
          let newType = formState.value.type.split(',');
          typeList.value.filter(item => {
            if (item.code == newType[0]) {
              formState.value.type = item.name;
              item.children.filter(el => {
                if (el.code == newType[1]) {
                  formState.value.type = formState.value.type + '-' + el.name;
                }
              });
            }
          });
          console.log('222', formState.value.type);
        }
        if (formState.value.basicFile && formState.value.basicFile.indexOf('|')) {
          let fileArr = formState.value.basicFile.split('|');
          fileArr.forEach((item: any, index) => {
            fileList.value.push({
              name: item,
              uid: index,
              status: 'done',
              response: 'Server Error 500', // custom error message to show
              url:
                (window as any).g.baseURL +
                '/processReturn/download' +
                '?fileName=' +
                item +
                '&processBasicId=' +
                router.currentRoute.value.query.id,
            });
          });
        }
        if (formState.value.pdfFileFeedback && formState.value.pdfFileFeedback?.indexOf('|')) {
          let fileArr = formState.value.pdfFileFeedback.split('|');
          fileArr.forEach((item: any, index) => {
            feedbackFileList.value.push({
              name: item,
              uid: index,
              status: 'done',
              response: 'Server Error 500', // custom error message to show
              url:
                (window as any).g.baseURL +
                '/processReturn/download' +
                '?fileName=' +
                item +
                '&processBasicId=' +
                router.currentRoute.value.query.id,
            });
          });
        }
        if (formState.value.pdfFile) {
          visitFileList.value = [
            {
              name: formState.value.pdfFile,
              uid: 1,
              status: 'done',
              response: 'Server Error 500', // custom error message to show
              url:
                (window as any).g.baseURL +
                '/processReturn/download' +
                '?fileName=' +
                formState.value.pdfFile +
                '&processBasicId=' +
                router.currentRoute.value.query.id,
            },
          ];
        }
      });
    };
    const handleApproveUpdate = () => {
      loading.value = true;
      approveUpdate({
        basicContent: formState.value.basicContent,
        id: router.currentRoute.value.query.id,
        status: '1',
      })
        .then(res => {
          if (res.code == '200') {
            message.success('下发成功!');
            router.back();
            loading.value = false;
          }
        })
        .finally(() => {
          loading.value = false;
        });
    };
    const type = ref<any>('');
    const approvePersonList = ref<any>([]);
    const handlequeryApproveLeader = () => {
      queryApproveLeader().then(res => {
        approvePersonList.value = res.data;
      });
    };
    const recordList = ref<any>([]);
    const getLogList = () => {
      logList({ id: router.currentRoute.value.query.id }).then(res => {
        recordList.value = res.data;
      });
    };
    onActivated(() => {
      handleProcessTypeTree();
      handlequeryApproveLeader();
      queryProcessBasicList({ id: router.currentRoute.value.query.id });
      type.value = router.currentRoute.value.query.type;
      ishandlegetRetuenDetail();
      queryXqdwList();
      getLogList();
    });
    const isShow = ref<boolean>(true);
    const ishandlegetRetuenDetail = () => {
      let obj = {
        processBasicId: router.currentRoute.value.query.id,
      };
      getRetuenDetail(obj).then(res => {
        if (res.data.processReturnDetail == null) {
          isShow.value = false;
        } else {
          isShow.value = true;
        }
      });
    };
    const modalRef = ref();
    const handleEdit = () => {
      modalRef.value.showModal();
      let obj = {
        processBasicId: router.currentRoute.value.query.id,
      };
      modalRef.value.handlegetRetuenDetail(obj);
    };
    const queryXqdwList = async () => {
      const res = await getQueryXqdwList();
      if (res.code === 200) {
        unitList.value = [];
        res.data.forEach(item => {
          unitList.value.push({
            name: item.xqdwNameJc,
            value: item.xqdwCode,
          });
        });
      }
    };

    //PDF阅览
    const readClick = (type: number) => {
      window.open(url + '?type=' + type + '&processBasicId=' + formState.value.id);
    };
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      typeList,
      formState,
      onSubmit,
      handleBrak,
      queryProcessBasicList,
      type,
      loading,
      handleApproveUpdate,
      getunit,
      ishandlegetRetuenDetail,
      isShow,
      handleEdit,
      modalRef,
      unitList,
      queryXqdwList,
      readClick,
      fileList,
      feedbackFileList,
      visitFileList,
      recordList,
      basicContentText,
    };
  },
});
</script>
<style lang="less" scoped>
.form {
  width: 90%;
  margin: 0 auto;
  padding: 30px;
  :deep(.ant-form-horizontal .ant-form-item-control) {
    padding-top: 0px;
  }
}
.bottomc {
  display: flex;
  align-items: center;

  width: 100%;
  height: 70px;
  border-top: 1px solid #3f424d;
  .buttonContent {
    display: flex;

    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }
}
:deep(.ant-card-body) {
  padding: 0;
}
:deep(.ant-card-head) {
  display: flex;
  align-items: center;
  height: 48px;
  background: #34363c;
  border-radius: 0;
}
:deep(.ant-form-item) {
  margin-bottom: -5px;
  line-height: 0px;
}
:deep(.ant-form-item-control) {
  padding-top: 20px;
  line-height: 25px;
}
:deep(.ant-form-item-control) {
  margin-top: 7px;
}
:deep(.ant-upload-list-item) {
  margin-top: 0px;
}
</style>
